<template>
  <div class="dx-info-container" v-if="this.detailID">
    <div class="dx-header-container">
      <div>
        <i class="dx-layer" /><span>{{ detailData.zhName }}</span>
      </div>
      <div><i class="el-icon-close" @click="closeContainer" /></div>
    </div>
    <div v-if="true" class="dx-body-container">
      <component
        v-if="componentName"
        :is="componentName"
        :data-info="detailInfo"
        :file-info="fileInfo"
        :pdf-list="pdfList"
        :img-info="imgInfo"
      />
    </div>
    <div
      v-else
      style="width: 100%; height: 200px; text-align: center; line-height: 200px"
    >
      暂无数据
    </div>

    <!-- <ImgList v-if="imgInfo.length" :img-info="imgInfo" /> -->
  </div>
</template>

<script>
import DataOptions from "./dataOptions";
import ImgList from "./ImgList.vue";
export default {
  name: "DataDetail",
  inject: ["upDataDetailId"],
  props: {
    detailID: {
      type: String,
      default: "",
    },
  },
  components: {
    ImgList,
  },
  data() {
    return {
      detailData: {},
      detailType: "",
      // detailID: "",
      componentName: "",
      detailInfo: [],
      fileInfo: [],
      imgInfo: [],
      pdfList: [],
    };
  },
  mounted() {
    this.detailType = this.$route.query.type || {};
    this.detailData = DataOptions.fieldlabel[this.detailType];
    this.componentName = this.detailData.components.detial;
    this.getData();
  },
  methods: {
    getData() {
      const obj = {
        eventID: this.detailID,
      };
      this.detailInfo = [];
      this.fileInfo = [];
      this.imgInfo = [];
      this.pdfList = [];

      this.detailData.detailData &&
        this.detailData.detailData(obj).then((resp) => {
          if (resp && resp.detail && resp.detail.remark) {
            resp.detail.remark = resp.detail.remark.split(";");
          } else {
            resp.detail.remark = [];
          }
          if (resp.detail.length) {
            resp.detail[0].remark = resp.detail[0].remark
              ? resp.detail[0].remark.split(";")
              : (resp.detail[0].remark = []);
          }

          this.detailInfo = resp.detail || [];
          this.fileInfo = resp.files || [];
          this.imgInfo = resp.image || [];
          this.pdfList = resp.pdf || [];
        });
    },
    closeContainer() {
      // this.$emit("upDataDetailId", null);
      this.upDataDetailId(null);
    },
  },
  watch: {
    detailID() {
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
